<article class="cl pd-20">
    <form action="" method="post" class="form form-horizontal" id="form-save">
        <input type="hidden" name="id" id="id" value="{$data.id}">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                <span class="c-red">*</span>名称：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="text" class="input-text" id="title" name="title" value="{$data.title}"
                    autocomplete="名称">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                <span class="c-red">*</span>类别：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <span class="select-box">
                    <select class="select" id="type_id" name="type_id">
                        <option value="" >请选择类别</option>
                        {foreach $listTypes as $val}
                        <option value="{$val.id}" {eq name="data.type_id" value="$val.id" }selected{/eq}>{$val.name}</option>
                        {/foreach}
                    </select>
                </span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2">
                <span class="c-red">*</span>图片：</label></label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="hidden" class="input-text" value="{$data.picture}" name="picture" id="picture">
                <div style="width: 160px;height: 160px;">
                    <a href="javascript:void(0);" onclick="uploadPicture()">
                        <img id="view-img" src="{$data.picture ? $data.picture : '/static/images/upload_picture.png'}"
                            alt="图片" title="{$data.picture ? '更换' : '添加'}图片"
                            style="max-width: 160px;max-height: 160px;">
                    </a>
                </div>
            </div>
            <label class="form-label col-xs-2 col-sm-2">
                <a class="btn btn-success radius" href="javascript:uploadPicture();">{$data.avatar ? '更换' :
                    '添加'}图片</a></label>
            <div class="col-3"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                <span class="c-red"></span>状态：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <div class="radio-box">
                    <input type="radio" name="status" id="status-1" value="1" {$data.status==1 ? 'checked' : ""}>
                    <label for="typeId-1">启用</label>
                </div>
                <div class="radio-box">
                    <input type="radio" name="status" id="status-2" value="0" {$data.status==0 ? 'checked' : ""}>
                    <label for="status-2">禁用</label>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                <span class="c-red"></span>排序：</label>
                <div class="formControls col-xs-4 col-sm-4">
                    <input type="text" class="input-text" id="sort" name="sort"
                        placeholder="数字越大, 越靠前">
                </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-success radius" type="button" id="form-save-button"
                    value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                <input class="btn btn-default radius" type="button" value="&nbsp;&nbsp;取消&nbsp;&nbsp;"
                    onClick="layer_close();">
            </div>
        </div>
    </form>
    <!-- 图像上传 -->
    <div>
        <input type="file" hidden name="image" id="upload_picture">
    </div>
</article>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    // 图片上传
    const file = document.querySelector('input[type="file"]');

    function uploadPicture() {
        // file模拟input点击事件
        var evt = new MouseEvent("click", {
            bubbles: false,
            cancelable: true,
            view: window,
        });
        file.dispatchEvent(evt, uploadfn());
    }

    function uploadfn() {
        file.oninput = function () {
            if (file.files && file.files[0]) {
                var formData = new FormData();
                formData.append("upload_file", file.files[0]);
                $.ajax({
                    url: '{:url("/sys/file_manager/uploadImage")}',
                    type: "post",
                    data: formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    dataType: 'json',
                    success: function (res) {
                        // console.log(res);
                        var img = res.data.filename;
                        $("#view-img").attr('src', img); 
                        $("#picture").val(img);
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 1000
                        });
                    },
                    error: function (res) {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 1000
                        });
                        return false;
                    }
                });
            }
        }
    }

    // 清空选择文件
    function clearFile() {
        file.value="";
    }

    $(function () {
        $("#form-save-button").click(function () {
            var data = $("#form-save").serializeArray();
            $.ajax({
                type: 'POST',
                url: '{:url("/sys/honor/save")}',
                data: data,
                dataType: 'json',
                success: function (res) {
                    // console.log(res);
                    if (res.code == 0) {
                        layer.msg(res.msg, { icon: 1 }, function () {
                            parent.location.reload(); // 父页面刷新
                            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                            parent.layer.close(index);
                        });
                    } else {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 1000
                        });
                        return false;
                    }
                }
            })
        })
    })
</script>
<!--请在上方写此页面业务相关的脚本-->